<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="openDialog(3)">添加一级菜单</el-button>
    <el-button type="danger" @click="del()">批量删除菜单</el-button>
    <el-tree
            :data="ps"
            show-checkbox
            node-key="id"
            ref="tree"
            default-expand-all
            :expand-on-click-node="false"
            :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  class="el-icon-edit"
                  @click="() => openDialog(1,data)">
          </el-button>
             <el-button
                     type="text"
                     size="mini"
                     class="el-icon-circle-plus-outline"
                     @click="() => openDialog(2,data)">
          </el-button>
          <el-button
                  v-if="data.children.length==0"
                  type="text"
                  size="mini"
                  class="el-icon-delete"
                  @click="() => del(data.id)">
          </el-button>

        </span>
      </span>
    </el-tree>


    <!--修改和添加权限的弹出框-->
    <el-dialog title="权限维护" :visible.sync="dialogFormVisible">
        <el-form :model="permission">
            <el-form-item label="菜单名称" :label-width="formLabelWidth">
                <el-input v-model="permission.pname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="菜单url" :label-width="formLabelWidth">
                <el-input v-model="permission.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="菜单备注" :label-width="formLabelWidth">
                <el-input v-model="permission.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" :label-width="formLabelWidth">
                <el-input v-model="permission.icon" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePermission">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            permission:{//修改和添加权限对象
                id:undefined,
                url:undefined,
                remark:undefined,
                parentid:undefined,
                pname:undefined,
                icon:undefined,
            },
            ps:[],//所有的权限
            defaultProps: {
                children: 'children',
                label: 'pname'
            },
            flag:undefined, //标记添加还是修改
        },
        methods: {
            del(id){// 删除方法
                let ids=[];
                if (id){//单个删除
                    ids.push(id);
                }else{//批量删除
                    //获取选中的权限的id
                    ids=this.$refs.tree.getCheckedKeys();
                    // console.log(checkedKeys)
                }
               if (ids.length==0){
                   this.$message({
                       type:"warning",
                       message:"至少选中一条数据"
                   });
                   return;
               }

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//点击确定
                    //发送ajax  删除数据
                    axios.delete(`/permission?ids=${ids.join(",")}`)
                        .then(resp=>{
                            let data=resp.data;
                            if (data.code==200){
                                this.$message({
                                    type:"success",
                                    message:"操作成功"
                                });
                                //刷新数据
                                this.initData();
                            }else{
                                this.$message({
                                    type:"error",
                                    message:data.msg
                                });
                            }
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //打开弹框 flag=1 修改,2在菜单下面添加子菜单  ,3.添加一级菜单
            openDialog(flag,per){
                this.flag=flag;
                this.dialogFormVisible=true;
                if(flag==1){//修改
                    this.permission={...per}
                }else if (flag==2){
                    this.permission={//在菜单下面添加子菜单
                        id:undefined,
                        url:undefined,
                        remark:undefined,
                        parentid:undefined,
                        pname:undefined,
                        icon:undefined,
                    };
                    //设置父菜单的id
                    this.permission.parentid=per.id
                }else{//添加一级菜单
                    this.permission={
                        id:undefined,
                        url:undefined,
                        remark:undefined,
                        parentid:undefined,
                        pname:undefined,
                        icon:undefined,
                    };
                    //设置父菜单的id=0
                    this.permission.parentid=0
                }
            },
            savePermission(){//点击保存
              // console.log(this.permission)
                axios({
                    method:this.flag==1?"put":"post",
                    url:'/permission',
                    data:this.permission
                }).then(resp=>{
                    let data=resp.data;
                    if (data.code==200){
                        this.$message({
                            type:"success",
                            message:"操作成功"
                        });
                        this.dialogFormVisible=false;
                        this.initData();
                    }
                })
            },
            remove(data){},
            add(data){},
            initData(){
                //获取所有的权限
                axios.get("/permission").then(resp=>{
                    let data=resp.data;
                    this.ps=data.result;
                })
            }
        },
        created(){
            this.initData();
        }
    })
</script>
</body>
</html>